<template>
  <div class="dashboard-editor-container">
    <!--标题-->
    <div id="topTitle">
      <el-row>
        <el-col :span="20">
          <h1>查询条件制定</h1>
        </el-col>
        <el-col :span="4">
          <h2>
          <el-button type="primary" icon="el-icon-search" @click="customQuery">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
          </h2>
        </el-col>
      </el-row>
    </div>
    <!--查询条件-->
    <div id="queryConditions">
      <el-form ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="人员状态" prop="status">
              <el-radio-group v-model="form.status" size="medium">
                <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="性别" prop="sexList">
                <el-select v-model="form.sexList" placeholder="请选择性别" multiple clearable
                           :style="{width: '100%'}">
                  <el-option v-for="(item, index) in sexListOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="dateRange">
              <el-date-picker type="daterange" v-model="dateRange" format="yyyy-MM-dd" unlink-panels
                              value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                              end-placeholder="结束日期" range-separator="至" clearable>

              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="职称" prop="titles">
              <el-select v-model="form.titles" placeholder="请选择职称" multiple clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in titlesOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职级" prop="titleLevels">
              <el-select v-model="form.titleLevels" placeholder="请选择职级" multiple clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in titleLevelsOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="pstatusList">
              <el-select v-model="form.pstatusList" placeholder="请选择政治面貌" multiple clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in pstatusListOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="nationalityList">
              <el-select v-model="form.nationalityList" placeholder="请选择民族" multiple clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in nationalityListOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="学历" prop="educationList">
              <el-select v-model="form.educationList" placeholder="请选择学历" multiple clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in educationListOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学位" prop="degreeList">
              <el-select v-model="form.degreeList" placeholder="请选择学位" multiple clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in degreeListOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">

        </el-row>
      </el-form>
    </div>
    <!--查询结果列表-->
    <div>
      <el-row>
        <el-col :span="20">
          <h1>查询结果</h1>
        </el-col>
        <el-col :span="4">
          <el-button
            type="info"
            size="medium"
            icon="el-icon-download"
            @click="handleExport"
          >导出Excel</el-button>
        </el-col>
      </el-row>
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <div class="chart-wrapper">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="250">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column fixed label="教师编号" align="center" prop="teacherId" width="100"/>
              <el-table-column label="归属部门" align="center" prop="deptId" width="100"/>
              <el-table-column label="姓名" align="center" prop="name" width="100"/>
              <el-table-column label="性别" align="center" prop="sex" width="100"/>
              <el-table-column label="出生日期" align="center" prop="birth" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.birth, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="民族" align="center" prop="nationality" width="100"/>
              <el-table-column label="政治面貌" align="center" prop="pstatus" width="100"/>
<!--              <el-table-column label="人员状态" align="center" prop="status" width="100"/>-->
              <el-table-column label="进入本校时间" align="center" prop="joinTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.joinTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="职称" align="center" prop="title" width="100"/>
              <el-table-column label="职级" align="center" prop="titleLevel" width="100"/>
              <el-table-column label="学历" align="center" prop="education" width="100"/>
              <el-table-column label="学位" align="center" prop="degree"width="100" />
            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="form.pageNum"
              :limit.sync="form.pageSize"
              @pagination="customQuery"
            />
          </div>
      </el-row>
    </div>
  </div>
</template>
<script>
import {exportPerson} from "@/api/teacher/person";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {treeselect} from "@/api/system/dept";
import {customQueryList, exportQueryList} from "@/api/customQuery/customQuery";
import {addDateRange1} from "@/utils/ruoyi";

export default {
  components: {Treeselect},
  props: [],
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      //查询结果列表
      tableData: [],
      // 总条数
      total: 0,
      dateRange: [],
      form: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
        sexList: [],
        deptId: undefined,
        titles: [],
        titleLevels: [],
        pstatusList: [],
        nationalityList: [],
        educationList: [],
        degreeList: [],
      },
      rules: {
        status: [],
        sexList: [],
        deptId: [],
        dateRange: [],
        titles: [],
        titleLevels: [],
        pstatusList: [],
        nationalityList: [],
        educationList: [],
        degreeList: [],
      },
      statusOptions: [{
        "label": "正常",
        "value": 0
      }, {
        "label": "弃用",
        "value": 1
      }],
      sexListOptions: [{
        "label": "男",
        "value": "男"
      }, {
        "label": "女",
        "value": "女"
      }],
      titlesOptions: [{
        "label": "教授",
        "value": "教授"
      }, {
        "label": "副教授",
        "value": "副教授"
      }, {
        "label": "讲师（高校）",
        "value": "讲师（高校）"
      }, {
        "label": "助教（高校）",
        "value": "助教（高校）"
      }],
      titleLevelsOptions: [{
        "label": "正高级",
        "value": "正高级"
      }, {
        "label": "副高级",
        "value": "副高级"
      }, {
        "label": "中级",
        "value": "中级"
      }, {
        "label": "助理级",
        "value": "助理级"
      }],
      pstatusListOptions: [{
        "label": "中共党员",
        "value": "中共党员"
      }, {
        "label": "预备党员",
        "value": "预备党员"
      }, {
        "label": "共青团员",
        "value": "共青团员"
      }, {
        "label": "群众",
        "value": "群众"
      }, {
        "label": "无党派",
        "value": "无党派"
      }],
      nationalityListOptions: [{
        "label": "汉族",
        "value": "汉族"
      }, {
        "label": "少数民族",
        "value": "少数民族"
      }],
      educationListOptions: [{
        "label": "博士研究生",
        "value": "博士研究生"
      }, {
        "label": "研究生教育",
        "value": "研究生教育"
      }, {
        "label": "本科教育",
        "value": "本科教育"
      }, {
        "label": "专科教育",
        "value": "专科教育"
      }],
      degreeListOptions: [{
        "label": "博士",
        "value": "博士"
      }, {
        "label": "硕士",
        "value": "硕士"
      }, {
        "label": "学士",
        "value": "学士"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTreeselect();
  },
  mounted() {},
  methods: {
    customQuery: function()
    {
      customQueryList(this.addDateRange1(this.form, this.dateRange)).then(response => {
        // this.msgSuccess("查询成功");
        this.open = false;
        this.tableData = response.rows;
        this.total = response.total;
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    /** 导出按钮操作 */
    handleExport() {
      //js常用遍历数组
      let A00s = []
      let array = this.tableData;
      array.forEach((item,index) => {
        let obj = item
        A00s.push([obj.teacherId])
      })
      console.log(A00s)
      this.$confirm('是否确认导出查询结果信息数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return exportQueryList(A00s);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
}
}

</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}
}
</style>
